<template>
	<view class="wap">
		<Search :search = "search"></Search>
		<view class="content">
			<view class="title">
				<text class="active">关注</text>
				<text>附近</text>
				<text>推荐</text>
			</view>
			
			<UserDynamic></UserDynamic>
			<!-- <view class="contentlist">
				<view class="contentlist_l">
					<image  src="" mode=""></image>
				</view>
				<view class="contentlist_r">
					<view class="contentlist_r_title">
						<view class="contentlist_r_title_r">
							<view>一人饮酒醉</view>
							<view style="font-size: 24rpx; color: #999999;margin-top: 4rpx;">2小时前更新</view>
						</view>
						<view class="contentlist_r_title_l">关注</view>
					</view>
					<view class="contentlist_r_content">
						<view>我醉与不醉是在你们的眼里，醒与不醒却是 在我心里，阿斯顿撒大所硕大的撒多大啥大萨达所大所多撒大所大所大大只是醉也想你醒也想你。</view>
						<view class="img">
							<view>
								<image src="" mode=""></image>
							</view>
							<view>
								<image  src="" mode=""></image>
							</view>
						</view>
						<view class="ding">
							<image :src="require('./static/img/dingwei.png')" mode=""></image>
							<text>北京</text>
						</view>
					</view>
					<view class="contentlist_r_footer">
						<view>
							<image :src="require('./static/img/zhuanfa.png')" mode=""></image>
						</view>
						<view class="contentlist_r_footer_l">
							<view>
								<image :src="require('./static/img/dianzan.png')" mode=""></image>
								<text>1.5w</text>
							</view>
							<view style="margin-left: 16rpx;">
								<image :src="require('./static/img/pinglun.png')" mode=""></image>
								<text>102</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			 -->
		</view>
		
		<view class="publish_wap" v-if="publish">
			<view class="publish">
				<view class="publish_ico">
					<navigator url="">
						<view>
							<image :src="require('./static/img/fabu.png')" mode=""></image>
							<text>发布动态</text>
						</view>
					</navigator>
					<navigator url="">
						<view>
							<image :src="require('./static/img/chuanjian.png')" mode=""></image>
							<text>创建故事</text>
						</view>	
					</navigator>
					
				</view>
				<view class="close" @click="show">
					<image :src="require('./static/img/cha.png')" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>	
import Search from "@/components/search/search.vue"
import UserDynamic from "@/components/UserDynamic/UserDynamic.vue"
	export default {
		components:{
			Search,
			UserDynamic
		},
		data() {
			return {
				search: '搜索',
				publish:false
			}
		},
		onLoad() {

		},
		methods: {
			show(){
				this.publish = !this.publish
			}
		}
	}
</script>

<style lang="scss">
.wap{
	padding: 32rpx 32rpx 128rpx 32rpx;
	border-top: 1rpx  solid rgba(0,0,0,0.1);
	.search{
		border-radius: 40rpx;
		padding: 14rpx 32rpx;
		display:flex;
		background: #F3F3F3;
		margin-bottom: 56rpx;
		image{
			width: 48rpx;
			height: 48rpx;
			margin-right: 16rpx;	
		}
	}
	
	.content{
		.title{
			display: flex;
			font-size: 30rpx;
			font-weight:bold;
			align-items: center;
			margin-bottom: 42rpx;
			text{
				margin-right: 64rpx;
				position: relative
			}
			.active{
				font-size: 40rpx;
				:before{
					content:"";
					background-color:#FEDD12;
					height: 6rpx;
					width: 80rpx;
					border-radius: 4rpx;
					position: absolute;
					bottom: -10rpx;
					left: 0;
				}
			}
		}
		.contentlist{
			display:flex;
			.contentlist_l{
				width: 95rpx;
				height: 95rpx;
				margin-right: 16rpx;
				border: 1px solid #808080;
				border-radius: 50%;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.publish_wap{
		position: fixed;
		background: rgba(0,0,0,0.6);
		width: 100%;
		height:100%;
		top: 0;
		left: 0;
		z-index: 999999;
		.publish{
			width: 100%;
			height: 458rpx;
			background: #FFFFFF;
			border-radius:16rpx 16rpx 0 0 ;
			position: absolute;
			bottom: 0;
			padding: 128rpx 128rpx 30rpx 128rpx;
			box-sizing: border-box;
		}
		.publish_ico{
			display:flex;
			justify-content: space-between;
			margin-bottom: 62rpx;
			view{
				display: flex;
				flex-flow: column;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				image{
					width: 100%;
					height:128rpx;
					margin-bottom: 32rpx;
				}
				
			}
		}
		.close{
			text-align:center;
			image{
				width: 34rpx;
				height: 34rpx;
			}
		}
	}
}
</style>
